new Vue({
    el:"#app",
    data:{
        input:"",
        toDos:[
            {id:0,content:"8:00在会议室开会",state:false},
            {id:1,content:"9:30参加学生讨论会",state:true},
            {id:2,content:"11:00接待外单位来访",state:true},
        ],
        showType:{all:"全部",isActive:"待完成",isCompleted:"已完成"},
        showTyped:{all:true,isActive:false,isCompleted:false},
        state:"all",
    },
    methods:{
        appendItem(){
            if (this.input==="")
                return
            this.toDos.push({
                id: this.toDos[this.toDos.length-1].id+1,
                content: this.input,
                state: true
            })
        },
        clearDone(){
            for (let i=0;i<this.toDos.length;i++){
                if(this.toDos[i].state===false){
                    this.toDos.splice(i,1)
                }
            }
        },
        completed(id){
            for(let i=0;i<this.toDos.length;i++){
                if(this.toDos[i].id===id){
                    this.toDos[i].state=false
                }
            }
        },
        isActive(){
            this.state="isActive"
        },
        isCompleted(){
            this.state="isCompleted"
        },
        all(){
            this.state="all"
        },
        delOne(id){
            for(let i=0;i<this.toDos.length;i++){
                if(this.toDos[i].id===id){
                    this.toDos.splice(i,1)
                }
            }
        },
        showTypeF(key,index){
            this.showTyped[key]=!this.showTyped[key]
            switch (index){
                case 0:
                    return this.all()
                case 1:
                    return this.isActive()
                case 2:
                    return this.isCompleted()
            }
        },
        changeF(id){
            for(let i=0;i<this.toDos.length;i++){
                if(this.toDos[i].id===id){
                    this.toDos[i].state=!this.toDos[i].state
                }
            }
        }
    },
    computed:{
        total(){
            return this.toDos.length
        },
        notDoneCount(){
            return this.toDos.reduce((count,i)=>{
                if(i.state===true)
                    return count+1
                else return count
            },0)
        },
        itemArray(){
            switch (this.state){
                case "isActive":
                    return this.toDos.filter(i=>i.state===true)
                case "isCompleted":
                    return this.toDos.filter(i=>i.state===false)
                case "all":
                    return this.toDos
            }
        },
    }
})